<template>
	<div class="decorate-goods" 
  :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <!-- 第二版商品组件 -->
    <div class="version2" :class="tplId == 6 ? 'new-layout6' : ''" v-if="tplItemData.version && tplItemData.version == 1">
      <!-- 双列商品 -->
      <biserial-row-layout v-if="tplItemData.layout==1 && ItemData" :tplItemData="ItemData"></biserial-row-layout>
      <!-- 单列商品 -->
      <single-row-layout v-if="tplItemData.layout==2 && ItemData" :tplItemData="ItemData"></single-row-layout>
      <!-- 一行三列商品 -->
      <three-row-layout v-if="tplItemData.layout==4 && ItemData" :tplItemData="ItemData"></three-row-layout>
      <!-- 一大两小 -->
      <big-small-layout v-if="tplItemData.layout==5 && ItemData" :tplItemData="ItemData"></big-small-layout>
      <!-- 滑动商品 -->
      <slider-layout v-if="tplItemData.layout==3 && ItemData" :tplItemData="ItemData"></slider-layout>
    </div>
    <!-- 最新版商品组件 -->
    <div class="version3" v-else-if="tplItemData.version && tplItemData.version == 2">
      <new-layout v-if="ItemData" :tplId="tplId" :tplItemData="ItemData"></new-layout>
    </div>
    <!-- 第一版商品组件 -->
    <div class="version1" v-else>
      <!-- 小图 -->
      <old-layout :tplItemData="ItemData" v-if="ItemData"></old-layout>
    </div>
  </div>
</template>

<script>
  import { singleDiyJson } from '@/api/shop/index'
  import singleRowLayout from './singleRowLayout'
  import biserialRowLayout from './biserialRowLayout'
  import threeRowLayout from './threeRowLayout'
  import bigSmallLayout from './bigSmallLayout'
  import sliderLayout from './sliderLayout'
  import oldLayout from './oldLayout'
  import newLayout from './newLayout'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      singleRowLayout,
      biserialRowLayout,
      threeRowLayout,
      bigSmallLayout,
      sliderLayout,
      oldLayout,
      newLayout
    },
    props: {
      tplAllData: {
        type: Object,
        default() {
          return {}
        }
      },
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      },
      cityType: {
        tpye: String,
        default: ''
      },
      tplId: {
        type: [Number, String],
        default: 0
      }
    },
    data() {
      return {
        goodsParams: {},
        ItemData: {}
      }
    },
    watch: {
      // TODO 处理城市主页切换后 数据更新 视图不更新
      tplItemData(val) {
        // this.tplItemData.goodslist = this.tplItemData.goodsList
        // this.ItemData = Object.assign({}, this.tplItemData)
        this.handleGoodsData()
      }
    },
    methods:{
      handleGoodsData(){
        this.tplItemData.goodslist = this.tplItemData.goodsList
        this.ItemData = Object.assign({}, this.tplItemData)
        // 首页才请求商品组件接口
        if (this.$route.name == 'index' || this.$route.name == 'shopMain' || this.$route.name == 'module') {
          if (this.tplAllData) {
            this.goodsParams = {
              type: this.tplAllData.type,
              id: this.tplAllData.id,
              sort: this.tplAllData.sort
            }
            // 首页装修的城市主页组件，增加参数cityType
            if (this.$route.name == 'module') {
              this.goodsParams.moduleId = this.$route.query.id
            }
            if (this.cityType == '26') {
              this.goodsParams.cityType = 'cityMain'
            }
            singleDiyJson(this.goodsParams).then(res => {
              if (res.status == 1) {
                if (res.data) {
                  this.tplItemData.goodslist = res.data._diyHtml[0].content.goodsList
                  this.ItemData = this.tplItemData
                }
              } else {
                this.$Error(res.msg)
              }
            })
          }
        }
      }
    },
    created() {
      this.handleGoodsData()
    }
  })
</script>

<style lang="scss">
.decorate-goods{
  li{
    position: relative;
    .corner-mark{
      width: 70px;
      height: 70px;
      position: absolute;
      top: 0;
      left: 0;
      img{
        width: 100%;
      }
    }
  }
}

</style>
